<template>
  <mu-container>
    <mu-form ref="form" :model="topic">
      <mu-form-item prop="title" label label-float :rules="titleRules">
        <mu-text-field v-model="topic.title" placeholder="标题" color="error"></mu-text-field>
      </mu-form-item>
      <vue-editor
        v-model="topic.content"
        placeholder="内容"
        :editorToolbar="customToolbar"
      ></vue-editor>
      <mu-form-item style="float:right">
        <mu-button small color="error" @click="add()">
          <mu-icon left value="send"></mu-icon>提交
        </mu-button>
        <mu-button small color="grey500" @click="back()">
          <mu-icon left value="reply_all"></mu-icon>返回
        </mu-button>
      </mu-form-item>
    </mu-form>
    <mu-snackbar position="bottom" :open.sync="resultOpen">
      {{resultMsg}}
      <mu-button flat slot="action" color="secondary" @click="closeResult">Close</mu-button>
    </mu-snackbar>
  </mu-container>
</template>
<script>
import { VueEditor } from "vue2-editor";
// import ImageResize from "quill-image-ressize-module";

export default {
  components: {
    VueEditor
  },
  data() {
    return {
      loading: true,
      resultOpen: false,
      resultMsg: null,
      titleRules: [
        { validate: val => !!val, message: "必须填写标题" },
        { validate: val => val.length <= 50, message: "请输入小于50个字" }
      ],
      customToolbar: [
        // [{ font: [] }],
        // [{ header: [false, 1, 2, 3, 4, 5, 6] }],
        // [{ size: ["small", false, "large", "huge"] }],
        ["bold", "italic", "underline", "strike"],
        [
          { align: "" },
          { align: "center" },
          { align: "right" },
          { align: "justify" }
        ],
        [{ header: 1 }, { header: 2 }],
        ["blockquote", "code-block"],
        [{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
        [{ script: "sub" }, { script: "super" }],
        [{ indent: "-1" }, { indent: "+1" }],
        [{ color: [] }, { background: [] }],
        ["link", "image", "video"],
        // ["link", "image", "video", "formula"],
        // [{ direction: "rtl" }],
        ["clean"]
      ],
      topic: {
        title: "",
        content: ""
      }
    };
  },
  created() {
    setTimeout(() => (this.loading = false), 2000);
  },
  methods: {
    add() {
      var _this = this;
      this.$refs.form.validate().then(result => {
        console.log("form valid: ", result);
        if (result) {
          const loading = _this.$loading();
          _this.$http
            .post("/", _this.topic)
            .then(response => {
              let data = response.data;
              if (data.result == "success") {
                _this.$router.push({
                  name: "index",
                  params: { token: data.topic.token }
                });
              } else {
                _this.resultMsg = data.message;
                _this.resultOpen = true;
              }
              loading.close();
            })
            .catch(err => {
              _this.resultMsg = "服务器错误, 请稍后再试";
              _this.resultOpen = true;
              loading.close();
            });
        }
      });
    },
    back() {
      this.$router.go(-1);
    },
    closeResult() {
      this.resultOpen = false;
    }
  }
};
</script>